import React,{Component} from'react';
import NavLink from'./NavLink';

class Header extends Component {
    render(){
        var style={
            nav:{
                marginBottom:"0px"
            },
            header:{
                position:"fixed",
                top:"0px",
                width:"100%",
                zIndex:"100000",
                marginBottom:"30px"
            }
        }
        return (
        <div className='header' style={style.header}>
        <div className="navbar-wrapper">
            <nav className="navbar navbar-default" style={style.nav}>
                <div className="container-fluid">
                    <div className="navbar-header">
                    <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span className="sr-only">Toggle navigation</span>
                        <span className="icon-bar"></span>
                        <span className="icon-bar"></span>
                        <span className="icon-bar"></span>
                    </button>
                    <a className="navbar-brand" href="#">React</a>
                    </div>

                    <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul className="nav navbar-nav">
                    <li><NavLink to="/" onlyActiveOnIndex>首页</NavLink></li>
                    <li><NavLink to="/news">新闻</NavLink></li>
                    <li><NavLink to="/product">产品</NavLink></li>
                    <li><NavLink to="/carts">购物车</NavLink></li>
                    </ul>
                    <form className="navbar-form navbar-left">
                        <div className="form-group">
                            <input type="text" className="form-control" placeholder="Search" />
                        </div>
                        <button type="submit" className="btn btn-default">Submit</button>
                    </form>
                    <ul className="nav navbar-nav navbar-right">
                    <li><NavLink to="/Login" >登录</NavLink></li>
                    <li><NavLink to="/Register" >注册</NavLink></li>
                        <li className="个人中心">
                        <a href="#" className="dropdown-toggle" data-toggle="dropdown" 
                        role="button" aria-haspopup="true" aria-expanded="false">个人中心 <span className="caret"></span></a>
                        <ul className="dropdown-menu">
                            <li><NavLink to="/" onlyActiveOnIndex>首页</NavLink></li>
                            <li><NavLink to="/news">新闻</NavLink></li>
                            <li><NavLink to="/product">产品</NavLink></li>
                            <li><NavLink to="/carts">Carts</NavLink></li>
                        </ul>
                        </li>
                    </ul>
                    </div>
                </div>         
            </nav>
       </div>
       </div>
        )
    }
}

class Footer extends Component{
    render(){
        var style={
            footer:{
                width:"100%",
                backgroundColor:"black",
                position:"fixed",
                bottom:"0px"
            }
        }
        return (
            <div className="">
                <footer style={style.footer}>
                    <p className="pull-right"> &nbsp;&nbsp;&nbsp;&nbsp; <a href="#">Back to top</a> &middot; &middot; &middot; &middot;  &middot; &middot; </p>
                    <p> &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &copy; 2018 Company, Inc.&nbsp;&nbsp;&nbsp; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
                </footer>
            </div>
    
        )
    }
}

class App extends Component{
    render(){
        var style={
            mid:{
                marginTop:"40px"
            }
        }
        return (
            <div>
                <Header/>               
                <div className="" style={style.mid}>
                    {this.props.children}
                </div>
                <Footer/>
            </div>   
        )
    }
}
module.exports=App;
